<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :search.sync="search"
      :before-open="beforeOpen"
      :permission="permissionList"
      v-model="form"
      ref="crud"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="{ row }" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="openLockDialog(row)">详情</el-button>
      </template>
    </avue-crud>
    <el-dialog
      custom-class="unlock-dialog"
      append-to-body
      :close-on-click-modal="false"
      title="锁定详情"
      :visible.sync="lockDetailDialog.show"
      width="50%"
      @close="closelockDetailDialog"
    >
      <h3 class="custom-title"><i class="el-icon-vertical-bar mr10"></i>锁定信息</h3>
      <avue-form ref="unlockRef" v-model="lockDetailDialog.form" :option="lockDetailDialog.option"></avue-form>
      <h3 v-if="lockDetailDialog.form.operationType === 'UNLOCK'" class="custom-title"><i class="el-icon-vertical-bar mr10"></i>解除锁定</h3>
      <avue-form
        v-if="lockDetailDialog.form.operationType === 'UNLOCK'"
        ref="unlockRemarkRef"
        v-model="lockDetailDialog.remarkForm"
        :option="lockDetailDialog.remarkOption"
      ></avue-form>
      <p v-if="lockDetailDialog.form.operationType === 'UNLOCK'">已解锁序列号:</p>
      <p v-if="lockDetailDialog.form.operationType === 'LOCK'">已锁定序列号:</p>
      <avue-crud :option="lockDetailDialog.tableOption" :data="lockDetailDialog.table"></avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="lockDetailDialog.show = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import { getList } from '@/api/quality/serialNoLockRecord';
export default {
  data() {
    return {
      loading: true,
      data: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      query: {},
      option: {
        height: 'calc(100vh - 368px)',
        calcHeight: 30,
        searchShow: true,
        searchSpan: 5,
        searchMenuSpan: 19,
        searchMenuPosition: 'right',
        border: true,
        index: true,
        selection: false,
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        tip: false,
        indexLabel: '序号',
        dialogWidth: '50%',
        menuWidth: 150,
        column: [
          {
            label: '操作类型',
            prop: 'operationType',
            search: true,
            searchOrder: 4,
            type: 'select',
            dicData: [
              { label: '锁定', value: 'LOCK' },
              { label: '解锁', value: 'UNLOCK' }
            ]
          },
          { label: '工单号', prop: 'workOrderNo', search: true, searchOrder: 5 },
          { label: '产品编码', prop: 'productPartNo', search: true, searchOrder: 2 },
          { label: '产品名称', prop: 'productPartName' },
          { label: '产品型号', prop: 'productPartModel', search: true, searchOrder: 3 },
          {
            label: '锁定原因/解锁说明',
            prop: 'operationReason',
            formatter: (val, value, label) => {
              if (val.operationType === 'LOCK') {
                return '锁定原因：' + value;
              } else {
                return '解锁说明：' + value;
              }
            }
          },
          { label: '操作人', prop: 'operationByName' },
          {
            label: '操作时间',
            prop: 'operationTime',
            searchSpan: 8,
            searchType: 'datetimerange',
            search: true,
            searchOrder: 1,
            width: 130,
            display: false,
            type: 'date',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
          }
        ]
      },
      lockDetailDialog: {
        show: false,
        form: {},
        option: {
          submitBtn: false,
          emptyBtn: false,
          detail: true,
          column: [
            { label: '工单号', prop: 'workOrderNo' },
            { label: '产品编码', prop: 'productPartNo' },
            { label: '产品名称', prop: 'productPartName' },
            { label: '产品型号', prop: 'productPartModel' },
            { label: '锁定原因', prop: 'lockReason', type: 'textarea', span: 24, maxRows: 3, minRows: 3 }
          ]
        },
        table: [],
        tableOption: {
          height: '200px',
          calcHeight: 30,
          border: true,
          index: true,
          selection: false,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: false,
          refreshBtn: false,
          columnBtn: false,
          tip: false,
          indexLabel: '序号',
          menu: false,
          column: [
            {
              label: '产品序列号',
              prop: 'sequenceNumber'
            }
          ]
        },
        remarkForm: {},
        remarkOption: {
          submitBtn: false,
          emptyBtn: false,
          detail: true,
          column: [
            {
              label: '解锁说明',
              prop: 'operationReason',
              type: 'textarea',
              span: 24,
              maxRows: 3,
              minRows: 3,
              rules: [
                {
                  required: true,
                  message: '请输入解锁说明',
                  trigger: 'submit'
                }
              ]
            },
            {
              label: '',
              prop: 'operationRange',
              labelWidth: 0,
              span: 24,
              type: 'radio',
              dicData: [
                { label: '全部解锁', value: 'ALL' },
                { label: '部分解锁', value: 'PART' }
              ]
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  methods: {
    searchChange(params, done) {
      if (params.operationTime && params.operationTime.length > 0) {
        params.startTime = params.operationTime[0];
        params.endTime = params.operationTime[1];
        delete params.operationTime;
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    openLockDialog(row) {
      this.lockDetailDialog.show = true;
      this.lockDetailDialog.form = row;
      this.lockDetailDialog.remarkForm = row;
      let data = row.operationContent.split(',');
      this.lockDetailDialog.table = data.map((item) => {
        return {
          sequenceNumber: item
        };
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .unlock-dialog {
  .el-dialog__body {
    padding-top: 0;
    .avue-crud__menu {
      display: none;
    }
  }
}
::v-deep .el-card__body {
  .avue-crud__menu {
    display: none;
  }
}
</style>
